<template>
	<view class="content">
		<scroll-view class="tab-bar" scroll-x="true" :scroll-into-view="currentTab" scroll-with-animation="true">
			<view class="tab-item" v-for="(tab,index) in tabBars" :key="index" @click="switchTab(tab.id)">
				<text class="tab-title" :class="{'tab-title-active':currentTab==tab.id}">{{tab.name}}</text>
			</view>
		</scroll-view>
		<view class="line-h"></view>
		<!-- ===内容列表=== -->
		<swiper class="swiper-box" :current-item-id="currentTab" @change="switchTab()">
			<swiper-item class="swiper-item" v-for="(tab,index) in tabBars" :key="index">
				<!-- v-for="(value,key,index) in newsObj -->
				<uni-list :border="false">
					<scroll-view class="scroll-box" scroll-y="true" :refresher-enabled="true"
					 refresher-default-style="black" @refresherrefresh="onRefresh">
						<!-- <uni-list-item v-for="(news,index) in newsObj[tab.id]" :key="index" :title="news.title"
						 :ellipsis="2" :rightText="news.hot_value.toString()" :clickable="true" @click="openURL(news.url)"></uni-list-item> -->
					</scroll-view>
				</uni-list>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				currentTab: "weibo", //onLoad里重新设置为 this.tabBars[0].id
				newsObj: {},
				tabBars: [{
					name: '微博',
					id: 'weibo'
				}, {
					name: '知乎',
					id: 'zhihu'
				}, {
					name: '百度',
					id: 'baidu'
				}, {
					name: '微信',
					id: 'weixin'
				}, {
					name: '抖音',
					id: 'douyin'
				}, {
					name: '视频',
					id: 'video'
				}, {
					name: '视频',
					id: 'video'
				}]
			}
		},
		onLoad() {
			// this.tabBars.forEach((tabBar) => {
			// 	this.newsObj[tabBar.id] = [];
			// });
			this.currentTab = this.tabBars[0].id
			this.getList(this.currentTab);
		},
		computed: {
			// activated() {
			// 	return index => {
			// 		return this.currentTab == index ? "tab-title-active" : ""
			// 	}
			// }
		},
		methods: {
			openURL(url) {
				// #ifdef H5
				window.open(url)
				// #endif
				// #ifdef MP
				uni.setClipboardData({
					data: url
				});
				uni.showModal({
					content: '已自动复制网址，请在手机浏览器里粘贴该网址',
					showCancel: false
				});
				// #endif
			},
			onRefresh() {
				// if (this._freshing) return;
				// this._freshing = true;
				// setTimeout(() => {
				// 	this.triggered = false;
				// 	this._freshing = false;
				// }, 3000)
			},
			switchTab(index) {
				if (index === undefined) {
					index = this.currentTab
				} else {
					this.currentTab = index
				}
				if (this.newsObj[index] === undefined) {
					this.getList(index);
				}
			},
			getList(index) {
				var _this = this;
				uniCloud.callFunction({
					name: 'news',
					data: {
						type: index
					},
					success: (data) => {
						_this.newsObj[index] = data.result
					}
				})
			}
		}
	}
</script>
<style>
	/* --- */
	.content {
		width: 100%;
		min-height: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* 		align-items: center;
			justify-content: center; */
	}

	.tab-bar {
		width: 100%;
		height: 80rpx;
		/* display: -webkit-box; */
		flex-direction: row;
		white-space: nowrap;
		flex-wrap: nowrap;
	}

	.tab-item {
		padding-left: 34rpx;
		padding-right: 34rpx;
		align-items: center;
		display: inline-block;
		/* 行内块级元素 */
	}

	.tab-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.tab-title-active {
		color: #0077FF;
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.swiper-box {
		/* margin-top: 81rpx; */
		flex: 1;
		/* height: 100%; */
		/* overflow: hidden; */
	}

	.swiper-item {
		flex: 1;
		flex-direction: row;
	}

	.scroll-box {
		flex: 1;
		/* min-height: 100%; */
		width: 100%;
		/* overflow: hidden; */
		flex-direction: column;
	}
</style>
